window.addEventListener('load', function () {
    // ul li弹性布局渲染
    let listDataArr = [
        //第一行
        { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南1", price: "免费", isSpecial: false },
        { img: "./imgs/API_02.jpg", name: "身份证实名认证1", price: "￥0.2000/次", isSpecial: true },
        { img: "./imgs/API_03.jpg", name: "天气预报1", price: "免费", isSpecial: false },
        { img: "./imgs/API_04.jpg", name: "银行卡四元素校验1", price: "￥0.3360/次", isSpecial: true },
        { img: "./imgs/API_05.jpg", name: "短信API服务1", price: "￥0.0400/次", isSpecial: true },

        //第二行
        { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南2", price: "免费", isSpecial: false },
        { img: "./imgs/API_02.jpg", name: "身份证实名认证12", price: "￥0.2000/次", isSpecial: true },
        { img: "./imgs/API_03.jpg", name: "天气预报12", price: "免费", isSpecial: false },
        { img: "./imgs/API_04.jpg", name: "银行卡四元素校验12", price: "￥0.3360/次", isSpecial: true },
        { img: "./imgs/API_05.jpg", name: "短信API服务12", price: "￥0.0400/次", isSpecial: true },
        //第三行
        { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南13", price: "免费", isSpecial: false },
        { img: "./imgs/API_02.jpg", name: "身份证实名认证13", price: "￥0.2000/次", isSpecial: true },
        { img: "./imgs/API_03.jpg", name: "天气预报13", price: "免费", isSpecial: false },
        { img: "./imgs/API_04.jpg", name: "银行卡四元素校验13", price: "￥0.3360/次", isSpecial: true },
        { img: "./imgs/API_05.jpg", name: "短信API服务13", price: "￥0.0400/次", isSpecial: true },
        //第四行
        { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南13", price: "免费", isSpecial: false },
        { img: "./imgs/API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "./imgs/API_03.jpg", name: "天气预报13", price: "免费", isSpecial: false },
        { img: "./imgs/API_04.jpg", name: "银行卡四元素校验13", price: "￥0.3360/次", isSpecial: true },
        { img: "./imgs/API_05.jpg", name: "短信API服务13", price: "￥0.0400/次", isSpecial: true },
        { img: "./imgs/API_05.jpg", name: "短信API服务13", price: "￥0.0400/次", isSpecial: true },

    ]

    // lisHtml += `
    // <li class="rel">
    // <p class="abs font12 ${v.isSpecial ? 'on' : ''}">企业专用</p>
    // <a href="#" class="abs tcenter a1">
    //     <img src="${v.img}" alt="">
    //     <h2 class="mt20 font14">${v.name}</h2>
    //     <p class="mt10 ${v.price == '免费' ? 'bg29c287' : 'bgff549b'}">${v.price}</p>
    // </a>
    // <a href="#" class="abs tcenter a2">了解详情</a>
    // </li>
    // `


    let curPage=0;
    let endPage = 5;
    function render(curPage, endPage) {
        renderArr = listDataArr.slice(curPage,endPage)
        console.log(renderArr);

        let lisHtml = ''
        let ul = document.querySelector('#api-all-type .type-list')
        renderArr.forEach(function (v) {
            lisHtml += `
        <li class="rel">
        <p class="abs font12 ${v.isSpecial ? 'on' : ''}">企业专用</p>
        <a href="#" class="abs tcenter a1">
            <img src="${v.img}" alt="">
            <h2 class="mt20 font14">${v.name}</h2>
            <p class="mt10 ${v.price == '免费' ? 'bg29c287' : 'bgff549b'}">${v.price}</p>
        </a>
        <a href="#" class="abs tcenter a2">了解详情</a>
        </li>
        `
        })
        // console.log(lisHtml);
        ul.innerHTML = `${lisHtml}`


    }
    render(curPage,endPage)
// 分页渲染
    let divs = document.querySelectorAll('#api-page .api-page-list li div')
    console.log(divs);
    divs.forEach(function(v,i){
        divs[i].addEventListener('click',function(){
            // curPage = i*endPage;
            // endPage = (i+1)*endPage

            render(i*endPage,(i+1)*endPage)


        })
        


    }) 




})